<script setup>
import { useRouter } from '@/router';
import { useDownload, useRequest, useResetForm } from '@/hooks';
import { useGlobalState } from '@/store/globalState.js';
import { getEntPriceList } from '@/api/index.js';
import { TableList } from '@/components/MainComponents.js';
import ConfirmModal from '@/components/ConfirmModal.vue';
import DataImport from '@/components/DataImport/index.vue';
import SearchEnterprise from '@/components/EnterpriseInfo/SearchEnterprise.vue';

const uploadUrl = useGlobalState().globalState.fileUrl + '/entrust/price/uploadUsePrice';
const showUpload = ref(false);
const queryForm = ref(null);
const columnObj = ref({
  index: true,
  columnData: [
    {
      text: true,
      prop: 'costDate',
      label: '费用周期',
      width: '',
      align: 'center',
    },
    {
      text: true,
      prop: 'energyType',
      label: '能源类型',
      width: '',
      align: 'center',
    },
    {
      text: true,
      prop: 'price',
      label: '费用单价',
      width: '',
      align: 'center',
    },
    {
      text: true,
      prop: 'unit',
      label: '费用单位',
      width: '',
      align: 'center',
    },
  ],
});
const tableParams = ref({
  pageNum: 1,
  pageSize: 10,
  enterpriseCode: null,
  areaName: null,
  energyType: null,
  sDate: null,
  eDate: null,
});
const [tableData, loading, runTable] = useRequest(getEntPriceList, {
  defaultParams: [tableParams.value],
  manual: true,
  debounceInterval: 300,
});
const getList = e => {
  tableParams.value.pageNum = e.page;
  tableParams.value.pageSize = e.limit;
  runTable(tableParams.value);
};
const checkedChange = entChecked => {
  showUpload.value = false;
  tableParams.value.enterpriseCode = entChecked.enterpriseCode;
  handleQuery();
};
const handleQuery = () => {
  tableParams.value.pageNum = 1;
  runTable(tableParams.value);
};
const resetQuery = () => {
  useResetForm(queryForm);
  handleQuery();
};
const handleClick = () => (showUpload.value = true);
const handleUpdate = () => {
  showUpload.value = false;
  handleQuery();
};
const handleDownload = () => {
  useDownload('/businessbase/dataImportTemplate/download', { code: 'TG_NY_JG' }, '能源价格数据模板.xlsx');
};
const router = useRouter();
const isQiankun = window.__POWERED_BY_QIANKUN__;
const handleRecord = () => {
  if (isQiankun) {
    router.push({
      path: '/zhny/nytg/engPriceHis',
      query: { code: tableParams.value.enterpriseCode },
    });
  }
};
</script>

<template>
  <div class="app-container u-df-st">
    <div class="engData-left u-base-fg u-h100">
      <SearchEnterprise :isDefaultSelect="true" @checkedChange="checkedChange" />
    </div>
    <div class="engData-right">
      <div class="searBox u-mb20">
        <el-form :model="tableParams" ref="queryForm" :inline="true">
          <el-form-item label="能源类型" prop="energyType">
            <el-select
              v-model="tableParams.energyType"
              placeholder="请选择能源类型"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option v-for="item in ['电', '水', '气']" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间" prop="sDate">
            <el-date-picker
              v-model="tableParams.sDate"
              type="date"
              value-format="yyyy-MM-dd"
              size="small"
              clearable
              style="width: 190px"
            />
          </el-form-item>
          <el-form-item label="结束时间" prop="eDate">
            <el-date-picker
              v-model="tableParams.eDate"
              type="date"
              value-format="yyyy-MM-dd"
              size="small"
              clearable
              style="width: 190px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
            <el-button size="small" type="primary" plain @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-card shadow="never">
        <div class="u-df-ed u-mb20">
          <div class="u-mr10">
            <el-button v-show="!showUpload" type="primary" plain size="small" @click="handleClick">上传数据</el-button>
            <DataImport
              v-show="showUpload"
              :onlyShowBtn="true"
              :showIcon="false"
              :showTemDownload="false"
              :uploadUrl="uploadUrl"
              :extraParams="{ enterPriceCode: tableParams.enterpriseCode }"
              impText="上传数据"
              title="能源价格数据"
              @handleFileSuccess="handleUpdate"
            />
          </div>
          <el-button type="primary" plain size="small" @click="handleDownload">下载模板</el-button>
          <el-button type="primary" plain size="small" @click="handleRecord">上传记录</el-button>
        </div>
        <TableList
          v-loading="loading"
          :tableData="tableData?.rows ?? []"
          :columObj="columnObj"
          :height="600"
          :pageObj="tableParams"
          :total="tableData?.total ?? 0"
          @getList="getList"
        />
      </el-card>
    </div>
    <ConfirmModal :open="showUpload" msg="请确认所选企业与上传数据企业名称一致" />
  </div>
</template>

<style lang="scss" scoped>
.engData-left {
  width: 18%;
}
.engData-right {
  width: calc(82% - 20px);
  height: 100%;
  margin-left: 20px;
}
</style>
